<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/echarts/dist/echarts.js"></script>
</head>
<body>
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>
    
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            let option = {
                //标题
                title: {
                    text: '单位 万',
                    textStyle: {
                        color: '#4996f5', //颜色
                        fontSize: 14
                    },
                    left: 30
                },
                // 鼠标移入的提示框
                tooltip: {
                    // trigger: 'axis',
                    // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    //     type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
                    // }
                },
                // 图例组件
                legend: {
                    data: ['最高额度', '最低额度'],
                    right: 50,
                    textStyle: {
                        color: '#4995f4'
                    }
                },
                //工具栏
                // toolbox: {
                //     show: true,
                //     feature: {
                //         dataZoom: {
                //             yAxisIndex: 'none'
                //         },
                //         dataView: {readOnly: false},
                //         magicType: {type: ['line', 'bar']},
                //         restore: {},
                //         saveAsImage: {}
                //     }
                // },
                //X轴
                xAxis: {
                    type: 'category',
                    //坐标轴两边留白策略
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    //x轴刻度
                    axisTick: {
                        show: false
                    },
                    //x轴文本
                    axisLabel: {
                        color: '#438be5', //颜色
                        align: 'left' //文本对齐方式
                    },
                    //x轴轴线
                    axisLine: {
                        lineStyle: {
                            color: '#012b48'
                        }
                    }
    
                },
                //Y轴
                yAxis: {
                    type: 'value',
                    //y轴文本
                    axisLabel: {
                        // formatter: '{value} °C'
                        color: '#438be5'
                    },
                    //y轴刻度
                    axisTick: {
                        show: false
                    },
                    //y轴轴线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#012b48'
                        }
                    },
                    //y轴分割线
                    splitLine: {
                        lineStyle: {
                            color: '#012b48'
                        }
                    }
                },
                series: [{
                        name: '最高额度',
                        type: 'line',
                        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                        //线是否平滑
                        smooth: true,
                        //标记点的大小
                        symbolSize: 8,
                        //线和点都改变样式
                        itemStyle: {
                            color: '#00f2f1'
                        }
                        //线改变样式
                        // lineStyle:{
                        //     color:'red'
                        // },
                        //线包含的区域样式
                        // areaStyle:{
                        //     color:'red'
                        // }
                        //标记点
                        // markPoint: {
                        //     data: [
                        //         {type: 'max', name: '最大值'},
                        //         {type: 'min', name: '最小值'}
                        //     ]
                        // },
                        //标记线
                        // markLine: {
                        //     data: [
                        //         {type: 'average', name: '平均值'}
                        //     ]
                        // }
                    },
                    {
                        name: '最低额度',
                        type: 'line',
                        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
                        //线是否平滑
                        smooth: true,
                        //标记点的大小
                        symbolSize: 8,
                        //线和点都改变样式
                        itemStyle: {
                            color: '#dd3c36'
                        }
                    }
                ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
</body>
</html>